<template>
  <el-dialog
    :model-value="isVisible"
    title="子集批量排序"
    :before-close="handleCloseDialog"
    top="10vh"
  >
    <el-row class="mt10 mb10">
      <el-col :span="24">
        <span style="color: #ee9900">提示：子集排序为正序排序，数字越小越靠前</span>
      </el-col>
    </el-row>
    <el-table :data="tableData.dataList" v-loading="isloading" border max-height="350px" style="width: 100%">
      <el-table-column label="子集ID" prop="seriesid" :width="80"/>
      <el-table-column label="封面图" width="80" align="center">
        <template #default="{row}">
          <el-image
                  v-if="row.thumbs && row.thumbs.length > 0"
                  :src="row.thumbs[0].isself == 1 ? row.thumbs[0].viewurl + '&width=60px' : row.thumbs[0].viewurl"
                  :preview-src-list="imgSrcList"
                  :initial-index="initialIndex(row.thumbs[0].viewurl)"
                  fit="scale-down"
                  style="height:50px"
          />
        </template>
      </el-table-column>
      <el-table-column label="子集名称" prop="name" />
      <el-table-column label="排序" :width="150">
        <template #default="{row}">
          <el-input v-model.number="row.sequence" size="mini" class="input-w" style="width: 100px" :disabled="row.topno > 1"/>
        </template>
      </el-table-column>
    </el-table>
    <table-pagination
            v-if="tableData.total > 0"
            :query-list="queryList"
            :total="tableData.total"
            @pagination="handleGetSeries"
            class="mt10"
    />
    <template #footer>
      <div align="center">
        <el-button type="default" size="small" @click="handleCloseDialog">取消</el-button>
        <el-button type="primary" size="small" @click="handleSubmit">确定排序</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
  import {reactive, ref, defineProps, defineEmits, defineExpose, computed} from 'vue'
  import {getSeries, seriesBatchSort} from "@/api/series/series";
  import TablePagination from "@/views/public/TablePagination";
  import {ElMessage} from 'element-plus'

  const props = defineProps({
    mediaid: {
      type: Number,
      required: true
    },
    isVisible: {
      type: Boolean,
      default: false
    }
  })

  const initialIndex = computed(() => {
    return (viewurl) => {
      return imgSrcList.value.findIndex(d => d === viewurl)
    }
  })

  const tableData = reactive({
    total: 0,
    dataList: []
  })
  const isloading = ref(false)
  const queryList = reactive({
    page: 1,
    pagesize: 25,
    mediaid: undefined
  })
  const imgSrcList = ref([])

  const emit = defineEmits(['handleCloseDialog', 'reloadSeriesList'])
  const handleCloseDialog = () => {
    emit('handleCloseDialog')
  }

  const handleGetSeries = () => {
    postFormData.mediaid = props.mediaid
    postFormData.datas = []
    queryList.mediaid = props.mediaid
    if (queryList.mediaid) {
      isloading.value = true
      getSeries(queryList).then(response => {
        isloading.value = false
        if (response.errcode === 0) {
          const {total, list} = response.data
          tableData.dataList = list
          tableData.total = total
          imgSrcList.value = []
          tableData.dataList.forEach(row => {
            if (row.thumbs && row.thumbs.length > 0) {
              imgSrcList.value.push(row.thumbs[0].viewurl)
            }
          })
        }
      })
    }
  }

  const postFormData = reactive({
    mediaid: undefined,
    datas: []
  })
  const handleGetFormData = () => {
    postFormData.mediaid = props.mediaid
    tableData.dataList.forEach(row => {
      postFormData.datas.push({
        seriesid: row.seriesid,
        sequence: row.sequence
      })
    })
  }
  const handleSubmit = () => {
    handleGetFormData()
    if (postFormData.datas.length > 0) {
      seriesBatchSort(postFormData).then(response => {
        if (response.errcode === 0) {
          handleCloseDialog()
          ElMessage({
            type: 'success',
            message: response.msg,
            duration: 2000,
            onClose: () => {
              emit('reloadSeriesList')
            }
          })
        }
      })
    }
  }

  defineExpose({
    handleGetSeries
  })

</script>

<style scoped>

</style>
